<template>
  <!-- 维保管理--计划生产维保单-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item search-time"><span>维保开始时间:</span>
          <el-date-picker v-model="searchData.startDate" align="right" type="date" placeholder="选择开始时间">
          </el-date-picker>
        </div>
        <div class="search-item search-time"><span>维保结束时间:</span>
          <el-date-picker v-model="searchData.endDate" align="right" type="date" placeholder="选择结束时间">
          </el-date-picker>
        </div>
        <!--2版新加-->
        <div class="search-item search-time"><span>审核状态:</span>
          <el-select v-model="searchData.taskStatus" clearable>
            <el-option v-for="(item,key,index) in statusArr" :key="item.id" :label=item.label
                       :value=item.value></el-option>
          </el-select>
        </div>
        <div class="search-item search-time"><span>电梯类型:</span>
          <el-select v-model="searchData.elTypeId" placeholder="请选择" clearable>
            <el-option v-for="item in eleTypeArr" :key="item.id" :label=item.label
                       :value=item.value></el-option>
          </el-select>
        </div>
        <div class="search-item search-time plain-special-place"><span>小区名称:</span>
          <el-input placeholder="请输入小区名称/地址" v-model="searchData.elCommunity" clearable></el-input>
        </div>
        <areaSelect v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>

    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">

        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo"  v-on:selectChange="checkChange" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <el-table-column type="selection" width="55" fixed="left" :selectable="unCheck"></el-table-column>
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" v-if="pagePower['004002003'] && userRole!=3 && userRole != 4"
                      @click="$goRoute( '/manage/maintainMgr/plainTask/chooseEle')">
                创建维保单
              </button>
              <button class="some-btn some-btn-pass" @click="passTasks(1)" v-if="pagePower['004002002'] && userRole!=3 && userRole != 4">批量通过</button>
              <button class="some-btn some-btn-refuse" @click="passTasks(0)" v-if="pagePower['004002002'] && userRole!=3 && userRole != 4">批量忽略</button>
            </div>
          </div>
          <!--<el-table-column fixed="right" align="center" label="维保项目" width="500">-->
            <!--<template slot-scope="scope">-->
              <!--<el-popover ref="popover" placement="top-end" width="550" offset="-40" popper-class="el_pop standardPopo"-->
                          <!--trigger="hover" :content="scope.row.itemNames"></el-popover>-->
              <!--<div v-popover:popover>-->
                <!--<div class="item-names over-pop">{{scope.row.itemNames}}</div>-->
              <!--</div>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column fixed="right" align="center" label="操作" width="140"
                           v-if="pagePower['004002001'] || pagePower['004002002']">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link" v-if="pagePower['004002001']"
                     @click="$goRoute( '/manage/maintainMgr/plainTask/detailTask?type=detail&id='+ scope.row.id);">查看
                </div>
                <div class="item-route-link" v-show="scope.row.taskStatus === '1'" v-if="pagePower['004002002'] && userRole!=3 && userRole != 4"
                     @click="passTask(scope.row.id,1,scope.row.taskStatus)">通过
                </div>
                <!--2版新增-->
                <div class="item-route-link" v-show="scope.row.taskStatus === '1'" v-if="pagePower['004002002'] && userRole!=3 && userRole != 4"
                     @click="passTask(scope.row.id,0,scope.row.taskStatus)">忽略
                </div>
              </div>
            </template>
          </el-table-column>

        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import areaSelect from "../../../components/areaSelect/areaSelect"
  // 时间插件
  import moment from 'moment'
  import com from "../../../js/common"
  import HeadTop from "../../../components/head-top/head-top"
  import {getMaintainTaskList, maintainTaskCheck, getEleType} from '@/api/getData'

  export default {
    name: 'plainTask',
    components: {
      DataTable,
      areaSelect,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['004002'] ? JSON.parse(com.getStore('pagePowers'))['004002'] : {},
        // 区域选择
        areaText: '区域选择:',
        // 用户角色
        userRole: com.getStore('role'),
        // 搜索区域数据
        searchData: {
          // 2版新增
          status: '',
          startDate: '',
          endDate: '',
          elRegCode: '',
          depName: '',
          elTypeId: '',
          elCommunity: '',
        },
        eleTypeArr: [],
        checkIds: '',
        // 表格组件数据
        dataTableObj: {

          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [
            {
              text: '序号',
              width: '50',
              attributeName: 'index'
            },
            {
              text: '电梯注册码',
              width: '100',
              attributeName: 'elCode'
            },
            {
              text: '电梯地址',
              width: '160',
              attributeName: 'elArea'
            },
            {
              text: '详细地址',
              width: '160',
              attributeName: 'detailAdress'
            },
            {
              text: '维保类型',
              width: '70',
              attributeName: 'maintainTypeName'
            },
            {
              text: '计划维保时间',
              width: '70',
              attributeName: 'planDate'
            },
            {
              text: '审核状态',
              width: '60',
              attributeName: 'austatus'
            },
          ],

          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            //当前页
            pageNo: 1,
            searchStatus: 2
          },
        },

        statusArr: [
          {
            label: '所有计划',
            value: ''
          }, {
            label: '未审核',
            value: '1'
          }, {
            label: '已通过',
            value: '2'
          }, {
            label: '已忽略',
            value: '10'
          }
        ]
      }
    },
    // 获取当前页面所需数据
    created() {
      this.getPlainTaskData()
      // 获取当前页面所需电梯类型数据
      this.getEleTypeData();
    },
    beforeRouteEnter (to, from, next) {
      next(vm=>{
        com.setStore('taskEleCode','')
      })
    },
    methods: {
      // 获取页面所需数据
      getPlainTaskData(obj) {
        this.dataTableObj.pageObj.searchStatus = 2;
        this.dataTableObj.tableData = [];
        getMaintainTaskList({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let info = data.data.data;
          let infoArr = info.data;
          if (infoArr.length > 0) {
            let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize;
            const austatusObj = {1: '待审核', 2: '已通过', 10: '已忽略'};
            const maintainTypeObj = {1: '半月维保', 2: '季度维保', 3: '半年维保', 4: '年度维保'}
            infoArr.forEach(function (i, e) {
              i.index = startPage + e + 1;
              i.planDate = i.planDate ? moment(i.planDate).format('YYYY-MM-DD') : i.planDate;
              i.austatus = austatusObj[i.taskStatus];
              i.maintainTypeName = maintainTypeObj[i.maintainTypeId];
              i.detailAdress = i.elCommunity + i.elDetailsAddress;
            })
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr;
          this.dataTableObj.pageObj.pageNum = info.totalRecord;
        }).catch((data) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getPlainTaskData()
      },

      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val;
        this.getPlainTaskData()
      },

      // 按查询条件查找
      lookupByConditions: function () {
        this.getPlainTaskData();
      },

      // 获取查询地址
      getArea(res) {
        this.searchData.elAreaCode = res.code
      },

      // 获取页面所需电梯类型数据
      getEleTypeData() {
        getEleType({}).then((data) => {
          let info = data.data.data;
          let eleTypeArr = []
          info.forEach(function (i) {
            eleTypeArr.push({'label': i.name, 'value': i.id})
          })
          this.eleTypeArr = eleTypeArr;
        }).catch((err) => {
          this.$message.error('查询电梯类型数据失败');
        })
      },

      // 表格选框勾选
      checkChange(val) {
        let checkIds = [];
        for(let i of val){
          if(i.taskStatus === '1') checkIds.push(i.id);
        }
        this.checkIds = checkIds;
      },

      // 禁用表格选框勾选
      unCheck(val) {
        if(val.taskStatus != 1){
          return false;
        }else{
          return true;
        }
      },

      // 审核维保计划
      checkTask(resType, resId) {
        maintainTaskCheck({
          idList: resId,
          result: resType,
        }).then(() => {
          com.mask()
          this.$message.success({
            message: '操作成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.getPlainTaskData()
            }
          })
        }).catch((err) => {
          this.$message.error('操作失败: ' + err.data.message);
        })
      },

      // 批量审核通过/忽略
      passTasks(resType, resId){
        let idArr = [];
        let warnText = resType === 1 ? '确定要批量通过吗?': '确定要批量忽略吗?';
        idArr = this.checkIds;
        if (idArr.length <= 0) {
          this.$message.warning('请至少选择一条数据进行操作');
        } else {
          this.$confirm(warnText, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.checkTask(resType, idArr);
          }).catch(_ => {});
        }
      },

      // 单条数据审核通过/忽略
      passTask(id, type, status) {
        if (status === '1') {
          let arr = [];
          arr[0] = id;
          this.checkTask(type, arr);
        } else {
          this.$message.warning('请操作未审核记录');
        }
      },

      // 页面刷新
      pageReload(){
        this.getPlainTaskData();
      }
    },
  }
</script>
<style lang="scss" scope type="text/scss">
  @import "../../../style/entry/components/pageCommon";
  .plain-special-place.search-time input.el-input__inner{
    padding-left: 5px!important;
  }
</style>
